@import './var.scss';

/* BEM(block element modifier) 规范 */
// .os-button
@mixin b($block) {
  $B: $namespace + '-'+ $block !global;

  .#{$B} {
    @content;
  }
}

// .os-button.is-xxx
@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

// &--primary ==> .os-button--primary
@mixin m($modifier) {
  @at-root {
    #{&+$modifier-separator+$modifier} {
      @content;
    }
  }
}

// &__value ==> .os-items__value
@mixin e($element) {
  @at-root {
    #{'.' + $B + $element-separator + $element} {
      @content;
    }
  }
}

@mixin jbbg($direction: to right, $color1: $--color-jb3, $color2: $--color-jb4) {
  background: $color1 !important;
  background: linear-gradient($direction, $color1, $color2) !important;
}

/* 文本超出省略号 */
@mixin text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 渐变颜色字体 */
@mixin jbfont ($deg: 0deg, $color1: $--color-jb1, $color2: $--color-jb2) {
  background: linear-gradient($deg, $color1 0%, $color2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 滚动条样式 */
@mixin scrollbar() {

  /*滚动条整体样式*/
  ::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }

  /*滚动条里面小方块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    background: linear-gradient(to bottom, rgba(71, 118, 230, 0.6), rgba(142, 84, 233, 0.6));
  }

  /*滚动条里面轨道*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: transparent;
  }
}